import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';

import '../../base/imageres.dart';
import '../../base/constant.dart';
import '../../base/eventbus.dart';
import '../../base/log.dart';
import '../../base/stringres.dart';
import '../../base/theme.dart';
import '../../views/jsw_base_view.dart';
import '../../views/wheelview/clickable_list_wheel_widget.dart';

///女性健康下面的生理周期经期长度
class PeriodLengthPage extends StatefulWidget {
  final bool isReset;
  final int cycleValue;
  final int periodValue;

  const PeriodLengthPage({
    super.key,
    required this.isReset,
    required this.cycleValue,
    required this.periodValue,
  });

  @override
  State<StatefulWidget> createState() {
    return _PeriodLengthPageState();
  }
}

class _PeriodLengthPageState extends State<PeriodLengthPage> {
  static const _tag = '[page_period_leng.dart][_PeriodLengthPageState]';

  ///滑动控制器
  final _scrollController = FixedExtentScrollController();

  ///周期选择器数据
  final List<int> _items = List.generate(9, (index) => index + 2);

  ///滑动item高度
  static const double _itemHeight = 50;

  ///经期长度的值
  var _periodValue = 3;

  @override
  void initState() {
    super.initState();
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
        overlays: SystemUiOverlay.values);
    if (widget.isReset) {
      for (var i = 0; i < _items.length; i++) {
        if (_items[i] == widget.periodValue) {
          _periodValue = i;
          DartLog.i(_tag, "读取本地的经期长度：${_items[i]} 天");
          break;
        }
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage(ImageRes.bg_health_set),
              fit: BoxFit.cover, // 图片填充方式
            ),
          ),
        ),
        JSWBaseView(
          bodyColor: Colors.transparent,
          head: AppBar(
            elevation: 0.0,
            backgroundColor: Colors.transparent,
            title: EasyTouch(
              width: double.infinity,
              padding: const EdgeInsets.only(right: 55),
              child: Text(
                widget.isReset ? StringRes.period_length_content : StringRes.women_cycle_title,
                textAlign: TextAlign.center,
                style: ThemeUtil.toolbar,
              ),
            ),
            leading: IconButton(
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent,
              hoverColor: Colors.transparent,
              icon: const Icon(
                Icons.arrow_back,
                color: Colors.white,
              ),
              onPressed: () {
                Get.back();
              },
            ),
          ),
          body: Column(
            children: [
              //内容
              Container(
                  margin: const EdgeInsets.only(top: 30, left: 20, right: 20),
                  child: Text(
                    textAlign: TextAlign.center,
                    StringRes.women_period_content,
                    style: ThemeUtil.h1.copyWith(fontSize: 20),
                  )),

              //提示
              Container(
                  margin: const EdgeInsets.only(top: 10, left: 20, right: 20),
                  child: Text(
                    StringRes.women_period_tips,
                    textAlign: TextAlign.center,
                    style: ThemeUtil.p2.copyWith(
                        color: const Color(ThemeUtil.primaryWhiteValue50)),
                  )),

              //周期选择器
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Container(
                    margin: const EdgeInsets.only(top: 24),
                    height: 240,
                    width: 60,
                    child: ClickableListWheelScrollView(
                      scrollController: _scrollController,
                      itemHeight: _itemHeight,
                      itemCount: _items.length,
                      child: ListWheelScrollView.useDelegate(
                        controller: FixedExtentScrollController(
                            initialItem: _periodValue),
                        itemExtent: _itemHeight,
                        physics: const FixedExtentScrollPhysics(),
                        overAndUnderCenterOpacity: 0.5,
                        perspective: 0.002,
                        onSelectedItemChanged: (index) {
                          _periodValue = index;
                        },
                        childDelegate: ListWheelChildBuilderDelegate(
                          builder: (context, index) => Text(
                              textAlign: TextAlign.center,
                              _items[index].toString(),
                              style: ThemeUtil.p1),
                          childCount: _items.length,
                        ),
                      ),
                    ),
                  ),
                  Text(StringRes.days,
                      textAlign: TextAlign.center, style: ThemeUtil.p1),
                ],
              ),
            ],
          ),
          bottom: Container(
            margin:EdgeInsets.only(bottom: 30 + MediaQuery.of(context).viewPadding.bottom, top: 10,  left: 30, right: 30),
            child: //下一步按钮
                Container(
              height: 50,
              alignment: Alignment.center,
              decoration: ThemeUtil.themeConStyle,
              child: TextButton(
                style: ThemeUtil.themebtnStyle,
                onPressed: () async {
                  DartLog.i(_tag, "保存本地的经期长度：${_items[_periodValue]}天");
                  if (widget.isReset) {
                    EventBusUtil.getInstance().fire(DataEvent(
                        HealthDataType.REFRESH_SETTING_PERIODVALUE,
                        _items[_periodValue]));
                    Get.back();
                  } else {
                    Get.toNamed(PageIndex.menstrualTimePage, arguments: {
                      "cycleValue": widget.cycleValue,
                      "periodValue": _items[_periodValue]
                    });
                  }
                },
                child: Text(
                    widget.isReset
                        ? StringRes.confirm
                        : StringRes.next_step,
                    textAlign: TextAlign.center,
                    style: ThemeUtil.p2),
              ),
            ),
          ),
        ),
      ],
    );
  }
}
